<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的地址</title>
    <div th:include="includeJs::includeJs"></div>
    <div th:include="includeJs::layui_js"></div>

    <link rel="stylesheet" th:href="@{/css/account/lay-cz.css}">
    <link rel="stylesheet" th:href="@{/css/userInfo/common.css}">
    <link rel="stylesheet" th:href="@{/css/userInfo/user.css}">
    <link rel="stylesheet" th:href="@{/css/userInfo/fileupload.less.css}">

    <script type="text/javascript" th:src="@{/js/userInfo/common.js}"></script>
    <script type="text/javascript" th:src="@{/js/userInfo/user.js}"></script>
    <script type="text/javascript">
    var defaults = {
        s1: 'provid',
        s2: 'cityid',
        s3: 'areaid',
        v1: null,
        v2: null,
        v3: null
    };

    </script>
</head>
<body>
<!--最上面-->
<link th:replace="includeJs::dingding_header">
<!--第二上面-->
<div style="background-color: white;width: 100%">
    <link th:replace="includeJs::dingding_nav">
</div>
<div id="addWin"style="display: none">
    <div style="width:800px;margin:50px auto;">
        <form id="addfrom" class="layui-form"  lay-filter="addfrom" >
            <div class="layui-form-item">
                <label class="layui-form-label">收货人名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="userName" required lay-verify="required" hidden autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">收货人电话</label>
                <div class="layui-input-inline">
                    <input type="text" name="phone" required lay-verify="required" hidden autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">选择地区</label>
                <div class="layui-input-inline">
                    <select name="provid" id="provid" lay-filter="provid">
                        <option value="">请选择省</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="cityid" id="cityid" lay-filter="cityid">
                        <option value="">请选择市</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="areaid" id="areaid" lay-filter="areaid">
                        <option value="">请选择县/区</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">详细地址</label>
                <div class="layui-col-xs6">
                    <textarea name="detailedAddress" required lay-verify="required" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button lay-submit lay-filter="subAddress" id="subAddress" class="layui-btn layui-btn-warm" ><i class="layui-icon layui-icon-ok" ></i>提交</button>
                </div>
            </div>
        </form>
    </div>
</div >
<div id="editWin"  style="display: none">
    <div style="width:800px;margin:50px auto;">
        <form id="editFrom" class="layui-form" lay-filter="editFrom">
            <div class="layui-form-item">
                <input name="id"  hidden />
                <label class="layui-form-label">收货人名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="userName" required lay-verify="required" hidden autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">收货人电话</label>
                <div class="layui-input-inline">
                    <input type="text" name="phone" required lay-verify="required" hidden autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">选择地区</label>
                <div class="layui-input-inline">
                    <select name="provid" lay-filter="provid">
                        <option value="">请选择省</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="cityid" lay-filter="cityid">
                        <option value="">请选择市</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="areaid" lay-filter="areaid">
                        <option value="">请选择县/区</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">详细地址</label>
                <div class="layui-col-xs6">
                    <textarea name="detailedAddress" required lay-verify="required" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button lay-submit lay-filter="editAddress" id="editAddress" class="layui-btn layui-btn-warm" ><i class="layui-icon layui-icon-ok" ></i>提交</button>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="wrapper wbgcolor">
    <div class="w1200 personal">
        <link th:replace="includeJs::userInfoMenu">
        <div class="personal-main">
            <div class="personal-zqzr personal-xtxx" style="min-height: 500px;">
                <h3><i>我的收货地址</i></h3>
                <form  class="layui-form"  id="form" name="form" method="post" action="">
                    <div class="zqzr-list">
                        <ul class="list_content">

                        </ul>
                        <button type="button" id="address" style="width: 100%;" class="layui-btn layui-btn-normal">添加地址</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" th:src="@{/js/data.js}"></script>
<script type="text/javascript" th:src="@{/js/province.js}"></script>
<script type="text/javascript">
    function addressList(){
        $.post('selAddress',function (data) {
            $(".list_content").empty();
            $.each(data,function (index,value) {
                let state;
                let col;
                if(value.state == 1){
                    state = "已默认";
                    col = "layui-btn-normal";
                }else if(value.state == 0){
                    state = "默认";
                    col = "";
                }
                $(".list_content").append("<li style=\"width: 100%;\">\n" +
                    "                                <span class=\"wdhb-name\" style=\"font-size: 15px;line-height: 2.5;\">"+value.user_name+"<font style=\"color: #9756005e;\">"+value.phone+"</font></span>\n" +
                    "                                <span class=\"wdhb-con\" style=\"font-size: 15px;line-height: 2.5;\">"+value.address+" "+value.detailed_address+"</span>\n" +
                    "                                <span class=\"wdhb-status\" style=\"float:right;width: 140px\">" +
                    "<button type=\"button\" name='moren' class=\"layui-btn "+col+" layui-btn-xs\">"+state+"</button>" +
                    "<button type=\"button\" name='edit' style='float: right;'  class=\"layui-btn layui-btn-warm layui-btn-xs\">修改" +
                    "<input hidden class='id' value='"+value.id+"'>" +
                    "<input hidden class='userName' value='"+value.user_name+"'>" +
                    "<input hidden class='provid' value='"+value.provid+"'>" +
                    "<input hidden class='cityid' value='"+value.cityid+"'>" +
                    "<input hidden class='areaid' value='"+value.areaid+"'>" +
                    "<input hidden class='detailed_address' value='"+value.detailed_address+"'>" +
                    "<input hidden class='phone' value='"+value.phone+"'>" +
                    "</button>" +
                    "<button type=\"button\" name='del' style='float: right;'  class=\"layui-btn layui-btn-danger layui-btn-xs\">删除<input hidden class='addressId' value='"+value.id+"' /></button></span>\n" +
                    "</li>");
            });
            layui.form.render();
        },'json');
    }
    layui.use([ 'element', 'table', 'layer', 'form' ,'laydate','upload','layedit'],function() {
        let element = layui.element;
        let layer = layui.layer;
        let table = layui.table;
        let form = layui.form;
        let laydate = layui.laydate;
        let upload = layui.upload;
        let layedit = layui.layedit;

        addressList();
        count();
        $("#address").click(function () {
            $("#addfrom")[0].reset();
            layui.form.render();
            layer.open({
                type: '1',
                area: ["800px","500px"],
                title: '添加地址',
                closeBtn: 1, //不显示关闭按钮
                fixed: false, //不固定
                shadeClose: true, //开启遮罩关闭
                content: $("#addWin"),
                cancel:function(index, layero){
                    $("#addfrom")[0].reset();
                    layui.form.render();
                    layer.close(index);
                }
            });
        });
        //添加地址
        form.on("submit(subAddress)",function (data) {
            $("#subAddress").attr("disabled",true);
            let xiaozezhu = $(".layui-select-title input");
            let addresss = "";
            xiaozezhu.each(function (dom,xiao) {
                if(dom <= 2) {
                    addresss = addresss + " " + $(xiao).val();
                }

            });
            $.ajax({
                url:'/address',
                data:{userName:data.field.userName,detailedAddress:data.field.detailedAddress,phone:data.field.phone,address:addresss,provid:data.field.provid,cityid:data.field.cityid,areaid:data.field.areaid},
                type:'POST',
                dadaType:'text',
                success:function(data){
                    if(data == 'yes') {
                        window.location.reload();
                        layer.msg("添加成功",{icon:1});
                        $("#subAddress").attr("disabled",false);
                    }else {
                        window.location.reload();
                        layer.msg("添加失败,最多添加五个地址");
                        $("#subAddress").attr("disabled",false);
                    }

                }
            });
            return false;
        });
        //修改请求
        form.on("submit(editAddress)",function (data) {
            let xiaozezhu = $(".layui-select-title input");
            let addresss = "";
            xiaozezhu.each(function (dom,xiao) {
                if(dom > 2) {
                    addresss = addresss + " " + $(xiao).val();
                }
            });
            $.ajax({
                url:'/editAddress',
                data:{id:data.field.id,userName:data.field.userName,detailedAddress:data.field.detailedAddress,phone:data.field.phone,address:addresss,provid:data.field.provid,cityid:data.field.cityid,areaid:data.field.areaid},
                type:'POST',
                dadaType:'text',
                success:function(data){
                    if(data == 'yes') {
                        layer.msg("修改成功",{icon:1});
                        window.location.reload();
                    }
                }
            });
            return false;
        });
        //设置默认
        $(".list_content").on('click','[name = moren]',function () {
            if($(this).text() == '已默认'){
                $("[name = moren]").removeClass("layui-btn-normal");
                $("[name = moren]").text("默认");
                editAllState();
                return;
            }
            $("[name = moren]").removeClass("layui-btn-normal");
            $("[name = moren]").text("默认");
            $(this).addClass("layui-btn-normal");
            $(this).text("已默认");
            if($(this).text() == "已默认"){
                editState($(this).parents("li").find('.addressId').val());
            }
        });
        //修改
        $(".list_content").on('click','[name = edit]',function () {
            let id = $(this).find(".id").val();
            let name = $(this).find(".userName").val();
            let provid = $(this).find(".provid").val();
            let cityid = $(this).find(".cityid").val();
            let areaid = $(this).find(".areaid").val();
            let phone = $(this).find(".phone").val();
            let detailed_address = $(this).find(".detailed_address").val();
            form.val("editFrom", {
                'id':id
                ,"userName":name // "name": "value"
                ,"provid":provid
                ,"cityid":cityid
                ,"phone":phone
                ,"areaid":areaid
                ,"detailedAddress":detailed_address
            });
            layer.open({
                type: '1',
                area: ["800px","500px"],
                title: '修改地址',
                closeBtn: 1, //不显示关闭按钮
                fixed: false, //不固定
                shadeClose: true, //开启遮罩关闭
                content: $("#editWin"),
                cancel:function(index, layero){
                    $("#editFrom")[0].reset();
                    layui.form.render();
                    layer.close(index);
                }
            });
        });
        //删除
        $(".list_content").on('click','[name = del]',function () {
            let id = $(this).find('.addressId').val();
            layer.confirm('确认要删除吗？', function(index){
                $.post('/delAddress',{id:id},function (d) {
                    if(d == 'yes'){
                        layer.msg('删除成功',{icon:1});
                        addressList();
                        count();
                    }else{
                        layer.msg('删除失败',{icon:1});
                        addressList();
                        count();
                    }
                });
                layer.close(index);
            });
        });
    });
    function editState(id) {
        $.post('/editState',{id:id},function () {

        },'text')
    }
    function editAllState() {
        $.post('/editAllState',function () {

        },'text')
    }
    function count() {
        $.post('/count',function (data) {
            if(data >= 5){
                $("#address").addClass("layui-btn-disabled")
                $("#address").attr("disabled",true)
            }else {
                $("#address").removeClass("layui-btn-disabled")
                $("#address").attr("disabled",false);
            }
        },'text')
    }

</script>
</html>